<template>
  <view class="i-moveSwiper">
    <i-tab
      :list="scrollList"
      :isScroll="isScroll"
      :modelValue="modelValue"
      @change="tabChange"
      :viewStyleData="viewStyleData"
      :size="size"
    ></i-tab>
    <view :style="{ padding }"></view>
    <view v-if="show_line" class="show_line"></view>
    <slot name="topSlot"></slot>
    <swiper
      @change="swiperChange"
      v-if="scrollList && scrollList.length"
      :duration="300"
      :current="modelValue"
      easing-function="linear"
      :style="{ height: swiperHeight + fontType }"
    >
      <swiper-item v-for="(item, index) in scrollList" :key="index">
        <slot :name="item.id"></slot>
      </swiper-item>
    </swiper>
  </view>
</template>

<script lang="ts" setup>
import {
  ref,
  defineProps,
  defineEmits,
  onMounted,
  getCurrentInstance,
} from "vue";
import _ from "lodash";

const props = defineProps({
  width: {
    type: String,
    default: "",
  },
  isScroll: {
    type: Boolean,
    default: true,
  },
  overflowX: {
    type: String,
    default: "auto",
  },
  show_line: {
    type: [Boolean, String],
    default: false,
  },
  left: {
    type: Number,
    default: 16,
  },
  scrollList: {
    type: Array,
    default: () => [],
  } as any,
  size: {
    type: [String, Number],
    default: "32",
  },
  center: {
    type: Boolean,
    default: false,
  },
  viewPadding: {
    type: [String, Number],
    default: 32,
  },
  margin: {
    type: String,
    default: "-15px",
  },
  linHeight: {
    type: String,
    default: "8rpx",
  },
  viewStyleData: {
    type: Object,
    default: () => {}
  },
  swiperHeight: {
    type: Number,
    default: 500,
  },
  fontType: {
    type: String,
    default: "px",
  },
  modelValue: {
    type: Number,
    default: 0,
  },
  padding: {
    type: String,
    default: "0",
  },
});
const emit = defineEmits(["update:modelValue", "change"]);

const swiperChange = ({ detail: { current } }) => {
  emit("update:modelValue", current);
  emit("change", { current, data: props.scrollList[current] });
};

const tabChange = (index: number) => {
  emit("update:modelValue", index);
  emit("change", { current: index, data: props.scrollList[index] });
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.i-moveSwiper {
  width: 100%;
  position: relative;
}

.scroll-view ::-webkit-scrollbar {
  display: none !important;
  width: 0;
  height: 0;
  color: transparent;
}
</style>
